<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
   <title>R.A.M. Labs</title>
   <meta name="Java Chips" content="Home"></meta>
</h:head>
<!-- Add 50px padding top to the body for the navbar -->
<h:body style="padding-top: 50px; padding-bottom: 20px;">
   <b:navBar brand="R.A.M. Labs" brandHref="index.jsf" inverse="true" fixed="top">
      <b:navbarLinks>
         <b:navLink class="active" value="Products" href="products.jsf"></b:navLink>
         <b:navLink value="Contact" href="contact.jsf"></b:navLink>
         <b:navLink value="About" href="about.jsf"></b:navLink>
      </b:navbarLinks>
      <h:form class="navbar-form navbar-left hidden-md hidden-sm hidden-xs">
         <input type="text" class="form-control"/>
         <button type="submit" class="btn btn-default">Search</button>
      </h:form>
      <!-- Following line is needed for TBS 3.0.1 (panel content overflow issue) -->
      <b:navbarLinks pull="right"><b:navLink value="    " href="#"></b:navLink></b:navbarLinks>
      <b:navbarLinks pull="right" styleClass="hidden-xs">
         <b:dropMenu value="My Account">
            <b:navLink value="Log-in" href="#"></b:navLink>
            <b:navLink value="Sign-out" href="#"></b:navLink>
         </b:dropMenu>
      </b:navbarLinks>
   </b:navBar>
   <br/>
   <h:form>
      <b:tabView contentStyle="border-right: 1px solid #ddd;border-left: 1px solid #ddd;border-bottom: 1px solid #ddd;padding:10px">
         <b:tab title="Memory">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                           <div id="j_idt201" class="row"><div id="j_idt202" class="col-md-10"><div id="j_idt203" class="thumbnail  ">
                              <img src="ram.jpg" alt="Generic placeholder thumbnail" align="middle"/>
                           </div></div></div>
                        <f:facet name="caption">
                           <h4>4GB DDR3 PC3-12800 1600MHz Desktop PC DIMM Memory RAM 240 pins For AMD System</h4>
                           <b:modal id="ram" title="4GB DDR3 PC3-12800 1600MHz Desktop PC DIMM Memory RAM 240 pins For AMD System" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="ram.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Capacity per Module:4 GB <br/>
                                 •	Number of Modules:2 <br/>
                                 •	Bus Speed:PC3-12800 (DDR3-1600) <br/>
                                 •	Form Factor: DIMM <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="DVD">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="dvd.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>Samsung Internal DVD Rom SH-116</h4>
                           <b:modal id="dvd" title="Samsung Internal DVD Rom SH-116" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="dvd.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	DVD+/-R Read: Up to 16X <br/>
                                 •	Enclosure Type: Internal <br/>
                                 •	Half Height <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="Power Supply">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="ps.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>Gaming Power Supply Unit</h4>
                           <b:modal id="ps" title="Gaming Power Supply Unit" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="ps.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Output Capacity: 600W <br/>
                                 •	Input Voltage: 220V <br/>
                                 •	Input Frequency Range: 47~63Hz <br/>
                                 •	Fan Size: 120mm Silent Fan <br/>
                                 •	Operation Temperature:0~40°C <br/>
                                 •	Power Good Signal: 100-500ms <br/>
                                 •	Certifications: 80PLUS Bronze <br/>
                                 •	Type: ATX 12V V2.31 <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="CPU Fan">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="nitro.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>SAPPHIRE RADEON™ RX 460 OC 2G GDDR5 128BIT (11257-00-20G)</h4>
                           <b:modal id="nitro" title="SAPPHIRE RADEON™ RX 460 OC 2G GDDR5 128BIT (11257-00-20G)" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="nitro.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	AMD XConnect™ Technology <br/>
                                 •	Dual-X Cooling <br/>
                                 •	HDR Ready <br/>
                                 •	Virtual Super Resolution <br/>
                                 •	AMD Freesync technology <br/>
                                 •	AMD Eyefinity Technology <br/>
                                 •	AMD Crossfire <br/>
                                 •	Frame Rate Target Control <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="Audio Card">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="audio.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>PCI Sound Audio Card 8 Channel for Desktop Computer</h4>
                           <b:modal id="audio" title="PCI Sound Audio Card 8 Channel for Desktop Computer" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="audio.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Compatible DirectSound 3D and EAX sound effects, Support 8-channel surround sound output, <br/>
                                 •	Compatible for Windows 7 Windows XP Vista <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="Heatsink">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="cooler.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>Dual Fan CPU Mini Cooler Heatsink for Intel LGA775/1156/1155 AMD AM2/AM2+/AM3 </h4>
                           <b:modal id="cooler" title="Dual Fan CPU Mini Cooler Heatsink for Intel LGA775/1156/1155 AMD AM2/AM2+/AM3 " styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="cooler.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Type:CPU Fan with Heatsink <br/>
                                 •	Fan size:80*80*25mm <br/>
                                 •	Weight:349g <br/>
                                 •	Bearing type:Hydro bearing <br/>
                                 •	Rated Voltage:12V DC <br/>
                                 •	Start Voltage:7V DC <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="Motherboard">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="motherboard.png" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>MSI h81m-p33 Motherboard</h4>
                           <b:modal id="motherboard" title="MSI h81m-p33 Motherboard" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="motherboard.png" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Supports 4th Gen Intel Core / Pentium / Celeron processors for LGA 1150 socket <br/>
                                 •	Supports DDR3-1600 Memory <br/>
                                 •	USB 3.0 + SATA 6Gb/s <br/>
                                 •	Military Class 4: Top Quality and Stability <br/>
                                 •	Military Class Essentials: Total Protection for Military Class Motherboards <br/>
                                 •	OC Genie 4: Overclock in 1 Second <br/>
                                 •	Click BIOS 4: Easily Fine-tune Your System <br/>
                                 •	Command Center: Control and Customize Your PC Settings <br/>
                                 •	Fast Boot: Quickly Boot Up and Enter OS in A Few Seconds <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="Mouse">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="mouse.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>MSI Interceptor DS B1 </h4>
                           <b:modal id="mouse" title="MSI Interceptor DS B1" styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="mouse.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	High speed motion detection at 37ips and acceleration up to 15g <br/>
                                 •	Resolution up to 1,600 <br/>
                                 •	Frame rate up to 4,000fps <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
         <b:tab title="AVR">
            <h:form>
               <b:panel>
                  <b:column col-sm="4" col-md="4">
                     <b:thumbnail>
                        <img src="cooler.jpg" alt="Generic placeholder thumbnail"/>
                        <f:facet name="caption">
                           <h4>Akari AVR-SVR-500W Automatic Voltage Regulator </h4>
                           <b:modal id="avr" title="Akari AVR-SVR-500W Automatic Voltage Regulator " styleClass="modalPseudoClass"
                                    closable="true" close-on-escape="true" backdrop="false">
                              <img src="avr.jpg" alt="Generic placeholder thumbnail"/>
                              <p>
                                 •	Automatic Voltage Regulator 500W <br/>
                                 •	Shields voltage fluctuation <br/>
                                 •	Compact <br/>
                                 •	Relay type <br/>
                                 •	With quick start <br/>
                              </p>
                              <f:facet name="footer">
                                 <p align="center">
                                    <b:button id="close" value="Close" look="danger" dismiss="modal" onclick="return false;"/>
                                    <b:button id="ok" value="Add to cart" look="success" dismiss="modal" onclick="return false;"/>
                                 </p>
                              </f:facet>
                           </b:modal>
                           <p align="center">
                              <b:button value="View" look="primary" onclick="$('.modalPseudoClass').modal();return false;"/>&nbsp;
                              <b:button value="Add to cart" look="success"/>
                           </p>
                        </f:facet>
                     </b:thumbnail>
                  </b:column>
               </b:panel>
            </h:form>
         </b:tab>
      </b:tabView>
   </h:form>
</h:body>
</html>
